﻿@{
    ViewBag.Title = "Quản lý thành phố - quận huyện";
    Layout = "~/Views/Shared/BE/_Admin_Layout.cshtml";
}

<article class="module width_3_quarter">
<div id="CityTable"></div>
</article>

<script type="text/javascript">

    $(document).ready(function () {       
        //Prepare jtable plugin
        $('#CityTable').jtable({
            //...
            selecting: true, //Enable selecting
            multiselect: true, //Allow multiple selecting
            selectingCheckboxes: true, //Show checkboxes on first column
            openChildAsAccordion: true,
            paging: true,
            pageSize: 10,
            defaultSorting: 'CityName ASC',
            sorting: true,
            title: 'Danh sách thành phố',
            actions: {
                listAction: '@Url.Action("ListCity","SchoolManagement")',
                deleteAction: '@Url.Action("DeleteCity", "SchoolManagement")',
                updateAction: '@Url.Action("UpdateCity","SchoolManagement")',
                createAction: '@Url.Action("CreateCity","SchoolManagement")'
            },
            fields: {
                CityID: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                CityName: {
                    title: 'Tên thành phố',
                    width: '40%',
                    inputClass: 'validate[required,maxSize[50]]'
                },
                DistrictCount: {
                    title: 'Số quận huyện trực thuộc',
                    width: '20%',
                    create: false,
                    edit: false
                },
                ListDistrict: {
                    title: 'Hiển thị quận huyện',
                    width: '20%',
                    sorting: false,
                    edit: false,
                    create: false,
                    listClass: 'child-opener-image-column',
                    display: function (cityData) {
                        //Create an image that will be used to open child table
                        var $img = $('<img class="child-opener-image" src="@Url.Content("~/Content/BE/images/icn_categories.png")"  />');
                        //Open child table when user clicks the image
                        $img.click(function () {
                            $('#CityTable').jtable('openChildTable',
                                $img.closest('tr'),
                                {
                                    selecting: true, //Enable selecting
                                    multiselect: true, //Allow multiple selecting
                                    selectingCheckboxes: true, //Show checkboxes on first column
                                    openChildAsAccordion: true,
                                    paging: true,
                                    pageSize: 10,
                                    defaultSorting: 'DistrictName DESC',
                                    sorting: true,
                                    title: 'Các quận trực thuộc - ' + cityData.record.CityName,
                                    actions: {
                                        listAction: '@Url.Action("ListDistrict")?cityID=' + cityData.record.CityID,
                                        deleteAction: '@Url.Action("DeleteDistrict")',
                                        updateAction: '@Url.Action("UpdateDistrict")',
                                        createAction: '@Url.Action("CreateDistrict")'
                                    },
                                    fields: {
                                        CityID: {
                                            type: 'hidden',
                                            defaultValue: cityData.record.CityID
                                        },
                                        DistrictID: {
                                            key: true,
                                            create: false,
                                            edit: false,
                                            list: false
                                        },
                                        DistrictName: {
                                            title: 'Tên Quận - Huyện',
                                            width: '30%',
                                            inputClass: 'validate[required,maxSize[50]]'
                                        },
                                        SchoolCount: {
                                            title: 'Số trường trong quận',
                                            width: '30%',
                                            create: false,
                                            edit: false
                                        }
                                    },
                                    //Initialize validation logic when a form is created
                                    formCreated: function(event, data) {
                                        $(data.form[0]).submit(function () {
                                            return false;
                                        });
                                        data.form.validationEngine();
                                    },
                                    //Validate form when it is being submitted
                                    formSubmitting: function(event, data) {
                                        return data.form.validationEngine('validate');
                                    },
                                    //Dispose validation logic when form is closed
                                    formClosed: function(event, data) {
                                        data.form.validationEngine('hide');
                                        data.form.validationEngine('detach');
                                    }
                                },
                                function(data) { //opened handler
                                    data.childTable.jtable('load');
                                });
                                $('.jtable-child-table-container  #LoadRecordsButton').click(function(  e) {
                                    e.preventDefault();
                                    //alert($('.jtable-child-table-container #name').val());
                                    var keyword = $('.jtable-child-table-container #name').val();
                                    $('.jtable-child-table-container').jtable('load', {
                                        keywords: keyword,
                                    });
                                });
                                //Delete selected students
                                $('.jtable-child-table-container #DeleteAllButton').button().click(function () {
                                    var $selectedRows = $('.jtable-child-table-container').jtable('selectedRows');
                                    $('.jtable-child-table-container').jtable('deleteRows', $selectedRows);
                                });
                        });
                        
                        //Return image to show on the person row
                        return $img;
                    }
                }
            },
            //Initialize validation logic when a form is created
            formCreated: function (event, data) {
                $(data.form[0]).submit(function () {
                    return false;
                });
                data.form.validationEngine();
            },
            //Validate form when it is being submitted
            formSubmitting: function (event, data) {
                return data.form.validationEngine('validate');
            },
            //Dispose validation logic when form is closed
            formClosed: function (event, data) {
                data.form.validationEngine('hide');
                data.form.validationEngine('detach');
            }
        });
         //Re-load records when user click 'load records' button.
        $('#LoadRecordsButton').click(function (e) {
            e.preventDefault();
            $('#CityTable').jtable('load', {
                keywords: $('#name').val(),
            });
        });
        //Load person list from server
        $('#CityTable').jtable('load');
        //
        //Delete selected students
        $('#DeleteAllButton').button().click(function () {
            var $selectedRows = $('#CityTable').jtable('selectedRows');
            $('#CityTable').jtable('deleteRows', $selectedRows);
        });
    });

</script>